<template>
	<app-layout>
		<template v-if="loading">
			<view class="app-search" v-if="search_bool">
				<app-search-for isemit @tosearch="tosearch"></app-search-for>
			</view>
			<!-- 样式十 -->
			<view class="margin-fixed">
				<app-style-ten :list="list" :setHeight="setHeight" :activeIndex="activeIndex" :goods_list="goods_list"
					:activeIndexTwo="activeIndexTwo" @active="activeThree" @lower="lower" @requestGoods="requestGoods"
					@setNav="activeTwo" @attr="attr" @route_advert="route_advert" :theme="getTheme"
					:is_over_goods="is_over_goods" @setAllNav="setAllNav" :acvitiveall="acvitiveall"></app-style-ten>
			</view>

			<!-- <app-attr ref="attr" :goods="item" :select-attr="selectAttr" :attr-group-list="attrGroup" :show="show"
				@attrtap="onAttr" :previewUrl="previewUrl" :submitUrl="submitUrl" :theme="getTheme"></app-attr> -->
			<sol-attr-goods addText="加入购物车" cartShow :is_show_buy="true" :goods="item" :attrGroupList="attrGroup"
				:theme="getTheme" :show="show">
				<!-- :cartShow="false" -->
			</sol-attr-goods>
		</template>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import appStyleTen from './style-ten.vue';
	import appSearchFor from '../../../components/page-component/app-search-for/app-search-for.vue';
	import routeJump from '../../../core/routeJump.js';
	import appAttr from '../../../components/page-component/app-attr/app-attr.vue';
	import solAttrGoods from '../components/sol-attr-goods.vue'

	export default {
		onShow() {
			this.show = false
		},
		// onHide() {
		// 	this.show = false
		// },
		components: {
			'app-search-for': appSearchFor,
			appStyleTen,
			'app-attr': appAttr,
			solAttrGoods
		},
		data() {
			return {
				search_bool: true,
				list: [],
				goods: [],
				request: true,
				page: 1,
				classId: 0,
				activeIndex: 0,
				activeIndexTwo: 0,
				over: false,
				scrollHeight: 0,
				tabbarbool: true,
				cat_id: 0,
				cat_ids: [],
				againLower: true,

				goods_list: [],
				page_count: 1,

				select_cat_id: 0,
				first_id: 0,
				loading: false,

				selectAttr: {},
				previewUrl: '',
				submitUrl: '',
				show: 0,
				attrGroup: [],
				item: {},
				is_over_goods: true,
				options: {},
				cat_style: {
					cat_style: '10'
				},
				acvitiveall: true,
				getTheme: 'q'
			}
		},
		computed: {
			// ...mapGetters('mallConfig', {
			// 	// cat_style: 'getCatStyle',
			// 	getTheme: 'getTheme'
			// }),
			...mapState('gConfig', {
				windowHeight: state => state.systemInfo.windowHeight,
				windowWidth: state => state.systemInfo.windowWidth
			}),
			...mapGetters('iPhoneX', {
				botHeight: 'getBotHeight'
			}),
			...mapState('mallConfig', {
				mall: state => state.mall,
			}),
			setHeight() {
				let bottom = 0;
				if (this.tabbarbool) {
					bottom = this.botHeight;
				}
				return (this.windowHeight * (750 / this.windowWidth)) - bottom - 88;
			}
		},
		onReachBottom() {
			if (this.cat_style.cat_style === '3' || this.cat_style.cat_style === '1') return;
			if (this.page < this.page_count) {
				this.page++;
				// this.$showLoading()
				// this.$showLoading({
				// 	type: 'global',
				// 	text: '加载中...'
				// });
				uni.showLoading({
					title: '加载中...'
				})
				this.$request({
					url: this.$apiSol.default.goods_list,
					method: 'get',
					data: {
						page: this.page,
						cat_id: this.cat_id,
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code === 0) {
						// if (this.cat_style.cat_style === '8' || this.cat_style.cat_style === '5') {
						//     this.dataProcessing(res.data.list);
						// } else {
						this.goods_list.push(...res.data.list);
						// }
					}
				}).catch(err => {
					uni.hideLoading()
				});
			} else {
				uni.showToast({
					title: '暂无更多商品',
					icon: 'none'
				})
			}
		},
		methods: {
			tosearch() {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/search/search'
				})
			},
			onAttr(data) {
				this.selectAttr = data;
			},
			attr(previewUrl, submitUrl, attr_groups, goods) {
				this.previewUrl = previewUrl;
				this.submitUrl = submitUrl;
				this.attrGroup = attr_groups;
				this.item = goods;
				this.show = Math.random();
			},
			route_advert(data) {
				routeJump({
					open_type: data.advert_open_type,
					params: data.advert_params,
					page_url: data.advert_url
				});
			},
			// 点击导航栏
			active(item) {
				this.page = 1;
				this.goods_list = [];
				this.cat_id = item.id;
				this.select_cat_id = item.id;

				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].active !== item.active) {
						this.list[i].active = false;
					}
					if (this.list[i].id === item.id) {
						this.list[i].active = true;
					}
				}
				this.is_over_goods = false;
				this.$request({
					url: `${this.$apiSol.default.goods_list}&page=${this.page}&cat_id=${item.id}`
				}).then(res => {
					if (res.code === 0) {
						this.goods_list.push(...res.data.list);
						this.page_count = res.data.pagination.page_count;
						this.is_over_goods = true;
					}
				});
			},
			// 下拉分页请求
			req() {
				this.$request({
					url: `${this.$apiSol.default.goods_list}&page=${this.page}&cat_id=${this.classId}`
				}).then(response => {
					if (response.data.list.length > 0) {
						this.goods.push(...response.data.list);
					} else {
						this.over = true;
					}
				});
			},
			activeOne(item) {
				this.page = 1;
				this.activeIndexTwo = 0;
				console.log(this.activeIndexTwo, 'this.activeIndexTwo111');
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				this.is_over_goods = false;
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].active !== item.active) {
						this.list[i].active = false;
					}
					if (this.list[i].id === item.id) {
						this.list[i].active = true;
						this.activeIndex = i;
					}
				}

				if (this.cat_style.cat_style === '5') this.goods_list = [];

				if (this.list[this.activeIndex].child.length === 0) {
					this.$request({
						url: `${this.$apiSol.default.goods_list}&page=${this.page}&cat_id=${item.id}`
					}).then(res => {
						let {
							list,
							pagination
						} = res.data;
						this.goods_list = list;
						this.is_over_goods = true;
						this.page = 1;
						this.cat_id = item.id;
						this.select_cat_id = item.id;
						this.page_count = pagination.page_count;
					});

				} else {
					this.$request({
						url: `${this.$apiSol.default.goods_list}&page=${this.page}&cat_id=${this.list[this.activeIndex].child[0].id}`
					}).then(res => {
						let {
							list,
							pagination
						} = res.data;
						this.goods_list = list;
						this.is_over_goods = true;
						this.page = 1;
						this.cat_id = this.list[this.activeIndex].child[0].id;
						this.select_cat_id = item.id;
						this.page_count = pagination.page_count;
					});
				}
			},
			async activeTwo(item, index) {
				this.page = 1;
				this.acvitiveall = false
				this.activeIndexTwo = index;
				console.log(this.activeIndexTwo, 'this.activeIndexTwo222');
				this.select_cat_id = item.id;
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				this.is_over_goods = false;
				const res = await this.$request({
					url: this.$apiSol.default.goods_list,
					method: 'get',
					data: {
						page: 1,
						cat_id: item.id
					}
				});
				if (res.code === 0) {
					let {
						list,
						pagination
					} = res.data;
					this.goods_list = [];
					this.goods_list = list;
					this.is_over_goods = true;
					this.page_count = pagination.page_count;
				}
			},
			activeThree(item) {
				console.log(item, 'item,;;ll');
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].active !== item.active) {
						this.list[i].active = false;
					}
					if (this.list[i].id === item.id) {
						this.list[i].active = true;
						// this.activeIndex = i;
						this.activeIndex = i;
					}
				}
			},

			async catLower() {
				if (!this.againLower) return;
				this.againLower = false;
				let goods_list = this.goods_list[this.goods_list.length - 1];
				const res = await this.$request({
					url: this.$apiSol.default.cat_goods,
					method: 'get',
					data: {
						cat_ids: JSON.stringify(this.cat_ids),
						cat_id: goods_list.id,
						offset: goods_list.offset
					}
				});
				if (res.code === 0) {
					if (res.data.list[0].id === goods_list.id && res.data.list[0].goods_list.length > 0) {
						this.goods_list[this.goods_list.length - 1].goods_list.push(...res.data.list[0].goods_list);
						this.goods_list[this.goods_list.length - 1].offset = res.data.list[0].offset;
					}
					for (let i = 1; i < res.data.list.length; i++) {
						this.goods_list.push(res.data.list[i]);
					}
					this.againLower = true;
				}
			},

			activeRequest(data) {
				this.goods_list = [];
				if (data.child.length !== 0) {
					this.requestCatList(data.child[0], 0);
				}
			},

			async requestCatList(data, index) {
				this.page = 1;
				this.cat_id = data.id;
				this.select_cat_id = data.id;
				this.activeIndexTwo = index;
				console.log(this.activeIndexTwo, 'this.activeIndexTwo333');
				this.goods_list = [];
				if (data.child.length !== 0) {
					this.is_over_goods = false;
					this.cat_ids = [];
					for (let i = 0; i < data.child.length; i++) {
						this.cat_ids.push(data.child[i].id);
					}
					const res = await this.$request({
						url: this.$apiSol.default.cat_goods,
						method: 'get',
						data: {
							cat_ids: JSON.stringify(this.cat_ids),
							cat_id: data.child[0].id,
							offset: 0
						}
					});
					if (res.code === 0) {
						this.is_over_goods = true;
						this.goods_list = res.data.list;
					}
				}
			},
			async setAllNav() {
				/* :list="list" :setHeight="setHeight" :activeIndex="activeIndex" :goods_list="goods_list"
					:activeIndexTwo="activeIndexTwo" @active="activeThree" @lower="lower" @requestGoods="requestGoods"
					@setNav="activeTwo" @attr="attr" @route_advert="route_advert" :theme="getTheme"
					:is_over_goods="is_over_goods" @setAllNav="setAllNav" :acvitiveall="acvitiveall" */
				console.log(this.activeIndexTwo, this.list, this.activeIndex,
					'*************--------------------++++++++++++++');
				let chaitem = this.list.filter(item => {
					return item.active
				})
				let aitem = chaitem[0]
				console.log(chaitem);
				this.acvitiveall = true
				this.requestGoods(aitem)
			},
			// 求情商品列表
			async requestGoods(data, index) {
				console.log(data, index, '********');
				this.acvitiveall = true
				this.page = 1;
				this.cat_id = data.id;
				this.select_cat_id = data.id;
				this.goods_list = [];
				console.log(data);
				console.log(this.cat_id);
				this.is_over_goods = false;
				/* if (this.cat_style.cat_style === '10' && index !== undefined && this.list[index].child.length !== 0) {
					this.activeIndexTwo = 0;
					console.log(this.activeIndexTwo, 'this.activeIndexTwo666');
					this.cat_id = this.list[index].child[0].id;
				} */
				const res = await this.$request({
					url: this.$apiSol.default.goods_list,
					method: 'get',
					data: {
						page: this.page,
						cat_id: this.cat_id
					}
				});
				if (res.code === 0) {
					this.is_over_goods = true;
					this.goods_list = res.data.list;
					this.page_count = res.data.pagination.page_count;
				}
			},

			// 分页请求商品
			async lower(data) {
				console.log(data);
				if (this.page < this.page_count) {
					this.page++;
					this.$showLoading()
					const res = await this.$request({
						url: this.$apiSol.default.goods_list,
						method: 'get',
						data: {
							page: this.page,
							cat_id: this.acvitiveall ? this.cat_id : data.id
						}
					});
					if (res.code === 0) {
						this.goods_list.push(...res.data.list);
						this.$hideLoading()
					} else {
						this.$hideLoading()
					}
				} else {
					uni.showToast({
						title: '暂无更多商品',
						icon: 'none'
					})
				}
			},

			// 处理数据
			dataProcessing(list) {
				for (let i = 0; i < list.length; i += 2) {
					if (i + 1 !== list.length) {
						this.goods_list.push([list[i], list[i + 1]]);
					} else {
						this.goods_list.push([list[i]]);
					}
				}
			},

			async requestCat(cat_id, select_cat_id) {
				this.loading = false;
				console.log(cat_id, this.cat_style.cat_style, '**********');
				const res = await this.$request({
					url: this.$apiSol.default.cat_list,
					method: 'get',
					data: {
						cat_id: cat_id ? cat_id : '',
						select_cat_id: select_cat_id ? select_cat_id : ''
					}
				});
				if (res.code === 0) {
					const data = {
						id: this.cat_id,
						name: '全部',
						active: true,
						is_show: 1,
						mall_id: 1,
						mach_id: 0,
						parent_id: 1,
						status: 1,
						child:[]
					}
					res.data.list[0].active = false
					this.list.push(data)
					this.list = [...this.list, ...res.data.list]
					// 分类跳转
					if (this.cat_style.cat_style === '1' && this.list.length === 0) {
						this.search_bool = false;
						return;
					}
					if (this.cat_style.cat_style === '2' || this.cat_style.cat_style === '1') {
						return;
					}
					if (this.cat_style.cat_style === '3' && this.list.length === 0) {
						this.search_bool = false;
						return;
					}
					if (cat_id || select_cat_id) {
						console.log('//**//**//**//**//**//');
						if (this.cat_style.cat_style === '11') {
							this.cat_ids = [];
							this.list.map((item, index) => {
								if (item.active) {
									this.activeIndex = index;
								}
							});
							if (this.list[this.activeIndex].child.length === 0) return;
							for (let i = 0; i < this.list[this.activeIndex].child[0].child.length; i++) {
								this.cat_ids.push(this.list[this.activeIndex].child[0].child[i].id);
							}
							if (this.cat_ids.length === 0) return;
							const res = await this.$request({
								url: this.$apiSol.default.cat_goods,
								method: 'get',
								data: {
									cat_ids: JSON.stringify(this.cat_ids),
									cat_id: this.cat_ids[0],
									offset: 0
								}
							});
							if (res.code === 0) {
								this.goods_list = res.data.list;
							}
							return;
						}
						if (this.cat_style.cat_style === '6' || this.cat_style.cat_style === '7') {
							this.list.map((item, index) => {
								if (item.active) {
									this.activeIndex = index;
								}
							});
							return;
						}
						if (this.list.length > 0) {
							for (let i = 0; i < this.list.length; i++) {
								if (this.list[i].active) { // list 总分类 列表
									this.cat_id = this.list[i].id;
								}
							}
						}
						if ((this.cat_style.cat_style === '5' || this.cat_style.cat_style === '10') && this.list
							.length > 0 && this.list[0].child.length > 0) {
							for (let i = 0; i < this.list.length; i++) {
								if (this.acvitiveall) {
									this.cat_id = this.list[0].id;
								} else if (this.list[i].active) {
									this.cat_id = this.list[i].child[0].id; // cat_id 总分类下子分类的id
								}
							}
						}

						if (this.list.length === 0 && (this.cat_style.cat_style === '4')) {
							this.search_bool = false;
							return;
						}

						const res = await this.$request({
							url: this.$apiSol.default.goods_list,
							method: 'get',
							data: {
								page: 1,
								cat_id: this.cat_id,
							}
						});
						if (res.code === 0) {
							this.goods_list = res.data.list;
							this.page_count = res.data.pagination.page_count;
							if (this.list.length === 0 && this.goods_list.length === 0) {
								this.search_bool = false;
							}
						}
					} else {
						console.log('\\/\\\////**//***---');
						if (this.list.length > 0) {
							if (this.cat_style.cat_style === '11') {
								this.cat_ids = [];
								if (this.list.length === 0 || this.list[0].child.length === 0) return;
								for (let i = 0; i < this.list[0].child[0].child.length; i++) {
									this.cat_ids.push(this.list[0].child[0].child[i].id);
								}
								if (this.cat_ids.length === 0) return;
								const res = await this.$request({
									url: this.$apiSol.default.cat_goods,
									method: 'get',
									data: {
										cat_ids: JSON.stringify(this.cat_ids),
										cat_id: this.cat_ids[0],
										offset: 0
									}
								});
								if (res.code === 0) {
									this.goods_list = res.data.list;
								}
								return;
							}

							console.log(this.cat_id);
							if ((this.cat_style.cat_style === '5' || this.cat_style.cat_style === '10') && this.list[0]
								.child.length > 0) {
								if (this.acvitiveall) {
									this.cat_id = this.list[0].id; // cat_id 总分类 id
								} else {
									this.cat_id = this.list[0].child[0].id; // 总分类下子分类id
								}
							}
							console.log(this.cat_id, 'wusugi');
							const res = await this.$request({
								url: this.$apiSol.default.goods_list,
								method: 'get',
								data: {
									page: 1,
									cat_id: this.cat_id,
								}
							});
							if (res.code === 0) {
								this.goods_list = res.data.list;
								this.page_count = res.data.pagination.page_count;
							}
						} else {
							this.search_bool = false;
						}
					}
				}
			}
		},
		onLoad(options) {
			this.options = options;
			setTimeout(() => {
				this.tabbarbool = this.$children[0].tabbarbool;
			}, 500);
			this.cat_id = options.cat_id;
			this.first_id = options.cat_id;
			console.log(options);
			if (options.first_id && options.select_cat_id) {
				this.requestCat(options.first_id, options.select_cat_id).then(() => {
					this.loading = true;
				});
			} else if (!options.first_id && options.select_cat_id) {
				this.requestCat('', options.select_cat_id).then(() => {
					this.loading = true;
				});
			} else if (!options.first_id && !options.select_cat_id) {
				this.requestCat(options.cat_id).then(() => {
					this.loading = true;
				});
			}
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/mch_solitaire/cats/cats',
				title: this.$children[0].navigationBarTitle,
				params: {
					cat_id: this.first_id,
					first_id: this.first_id,
					select_cat_id: this.select_cat_id
				}
			});
		},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return this.$shareTimeline({
				title: this.mall.setting.share_title ? this.mall.setting.share_title : this.mall.name,
				query: {
					cat_id: this.first_id,
					first_id: this.first_id,
					select_cat_id: this.select_cat_id
				}
			});
		},
		// #endif
	}
</script>


<style lang="scss" scoped>
	.app-search {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	.empty-search {
		height: #{88upx};
		width: #{750upx};
		background: #f7f7f7;
	}

	.margin-fixed {
		margin-top: #{88upx};
	}

	.app-top {
		width: $screen-width;
	}
</style>
